<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="/fonts/fontStyle.css">
<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
    body {

        color: #000;
        font-size: 17px;
        font-family: PingFangSC-Regular;
    }
    a {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none !important;
    }
    a:hover {
        text-decoration: none;
    }
    a:active {
        text-decoration: none;
    }
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }
    /* 隐藏浏览器的滚动条 */
    ::-webkit-scrollbar {
        width: 0px;
        height: 5px;
    }
    .el-menu-item {
        font-size: 17px;
    }
</style>
<script>
    function addTab01(e, name, src) {

    }
</script>
<div id="app">
    <el-container style="height: 100%;">
        <el-aside width="200px" style="background-color: #304156; height: 100%;">
            <el-scrollbar style="height: 100%;">
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        background-color="#304156"
                        text-color="#BFCBD9"
                        active-text-color="#409EFF"
                        style="font-size: 17px; font-family: PingFangSC-Regular;">
                    <el-menu-item index="1" @click="addTab(e, '当日成交量', '')">
                        <template slot="title">
                            <i class="el-icon-s-promotion"></i>
                            <span>当日成交量</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="2" @click="addTab(e, '当日成交量（录单）', '/listTodayRecord')">
                        <template slot="title">
                            <i class="el-icon-star-off"></i>
                            <span>当日成交量（录单）</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="3" @click="addTab(e, '当月成交量（录单）', '/listMonthRecord')">
                        <template slot="title">
                            <i class="el-icon-star-on"></i>
                            <span>当月成交量（录单）</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>话务员</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="5" @click="addTab(e, '通话时长', '/login')">
                        <template slot="title">
                            <i class="el-icon-phone"></i>
                            <span>通话时长</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="6" @click="addTab(e, '小组成交量', '/listGroup')">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>小组成交量</span>
                        </template>
                    </el-menu-item>
                    <%--<el-menu-item index="7">
                        <template slot="title">
                            <i class="el-icon-search"></i>
                            <span>成交率查询</span>
                        </template>
                    </el-menu-item>--%>
                    <el-menu-item index="8" @click="addTab(e, '折线图', '/chart')">
                        <template slot="title">
                            <i class="el-icon-data-analysis"></i>
                            <span>折线图</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="9" @click="addTab(e, '外呼项目', '/project')">
                        <template slot="title">
                            <i class="el-icon-notebook-1"></i>
                            <span>外呼项目</span>
                        </template>
                    </el-menu-item>
                    <%--<el-menu-item index="10">
                        <template slot="title">
                            <i class="el-icon-message-solid"></i>
                            <span>成单时间监控</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="11">
                        <template slot="title">
                            <i class="el-icon-bell"></i>
                            <span>小休时间监控</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="12">
                        <template slot="title">
                            <i class="el-icon-s-shop"></i>
                            <span>酬金数据模板</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="13">
                        <template slot="title">
                            <i class="el-icon-s-check"></i>
                            <span>员工入职登记</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="14">
                        <template slot="title">
                            <i class="el-icon-s-flag"></i>
                            <span>投诉信息登记</span>
                        </template>
                    </el-menu-item>--%>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        <el-container>
            <el-header style="background-color: #B3C0D1;"></el-header>
            <el-main>
                <div id="tabs">
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                        <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name">
                            <iframe :src="item.content" style="width: 100%; height: 100%; border: none;" scrolling="yes"></iframe>

                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    var Main = {
        data() {
            return {
                editableTabsValue: '1',
                editableTabs: [],
                tabIndex: 0
            }
        },
        methods: {

            addTab(event, title, src) {
                let newTabName = ++this.tabIndex + '';
                // alert(newTabName);
                this.editableTabs.push({
                    title: title,
                    name: newTabName,
                    content: src
                });
                this.editableTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>